<!--楼宇设备-->
<template>
  <div class="main">

    <basic-layout title="楼宇设备物资登记" :showAddBtn="false" :showFilterBtn="true"
                  @handleFilter="$refs.queryPopupRef.show = true">
      <div>
        <!--    列表数据-->
        <van-row class="listCard">
          <van-pull-refresh
            v-if="dataList.length" class="cardVanPullRefresh1" v-model="refreshing" @refresh="onRefresh">
            <van-list v-if="dataList.length > 0" v-model="loading" :finished="finished" finished-text="已经到底啦!"
                      @load="nextPage" :mmediate-check="false" :offset="100">
              <div v-for="(item,i) in dataList" :key="i" class="dataStyle">
                <!--左边文字-->
                <div>
                  <div class="hengXian" @click="editHandle(item.id)">
                    <div class="dataBStyle">
                      <div class="dataBBStyle">
                        <p class="dataBBTextStyle">
                          <span class="label">&nbsp;&nbsp;&nbsp;{{ item.shebmc }}</span>
                        </p>
                        <div class="aImgStyle1">
                          <span v-if="item.shiftq == '01'" style="color:green;">已贴签</span>
                          <span v-if="item.shiftq == '02' || item.shiftq == '' || item.shiftq == null "
                                style="color: red">未贴签</span>
                        </div>
                      </div>
                    </div>
                    <div class="mainStyle">
                      <div class="dataAStyle">
                        <div class="dataAAStyle">
                          <span v-if="!item.swid">无</span>
                          <span v-else class="label1"></span>&nbsp;&nbsp;&nbsp;{{ item.swid }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div class="dataStyleMing">
                      <div class="dataBStyle dataTopStyle" @click="editHandle(item.id)">

                        <div class="van-ellipsis dataBBTextStyle">
                          <span class="label " style="color: #aaa;">&nbsp;&nbsp;&nbsp;房产名称：</span>
                          {{ item.fangcname }}
                        </div>
                        <div class="dataB1Style">
                          <span class="xingH" style="color: #aaa;">&nbsp;&nbsp;&nbsp;型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
                          {{ item.xingh }}
                        </div>
                        <div class="dataBStyle dataTopStyle">
                          <div class="van-ellipsis dataBBTextStyle">
                            <span class="label" style="color: #aaa;">&nbsp;&nbsp;&nbsp;设备类别：</span>
                            {{ item.dal }}/{{ item.xiaol }}
                          </div>

                        </div>
                      </div>
                      <div class="bImgStyle">
                        <div class="btn" v-if="item.shiftq == '01'">
                          <van-button color="#f25454" plain @click="delHandle(item)">取消赋码</van-button>
                        </div>
                        <div class="btn1" v-if="item.shiftq == '02' || item.shiftq == '' || item.shiftq == null ">
                          <van-button color="green" plain @click="tieqHandle(item,i)">扫码赋码</van-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-row>
      </div>

      <!--    打开右侧搜索栏-->
      <queryPopup ref="queryPopupRef" @handleSearch="defineSearch" @handleReset="handleReset">
        <van-form class="filterBox">
          <label>大类：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="showDialogHandle(1)">
                <span v-if="!canteenData" style="color: #aaa">请选择</span>
                <span v-else>{{ canteenData }}</span>
              </div>
            </template>
          </van-field>
          <label>小类：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="showDialogHandle(2)">
                <span v-if="!SubclassData" style="color: #aaa">请选择</span>
                <span v-else>{{ SubclassData }}</span>
              </div>
            </template>
          </van-field>
          <label>楼宇：</label>
          <van-field>
            <template #input>
              <div class="textCon" @click="showDialogHandle(3)">
                <span v-if="!buildingData" style="color: #aaa">请选择</span>
                <span v-else>{{ buildingData }}</span>
              </div>
            </template>
          </van-field>
          <div class="typeStyle">
            <label>筛选状态：</label>
            <van-cell-group>
              <van-field name="checkboxGroup" label="" class="checkstyle">
                <template #input>
                  <van-checkbox-group
                    v-model="status"
                    class="vanCheckboxGroupStyle"
                  >
                    <van-checkbox shape="square" name="1" class="buttonStyle">
                      <template #icon="props">
                        <van-button v-if="props.checked" class="vanButtonStyleA">
                          <span>未贴签</span>
                        </van-button>
                        <van-button
                          v-else
                          color="#0ca8ad4f"
                          class="vanButtonStyle"
                        >
                          <span>未贴签</span>
                        </van-button>
                      </template>
                    </van-checkbox>
                    <van-checkbox shape="square" name="2" class="buttonStyle">
                      <template #icon="props">
                        <van-button v-if="props.checked" class="vanButtonStyleA">
                          <span>已贴签</span>
                        </van-button>
                        <van-button
                          v-else
                          color="#0ca8ad4f"
                          class="vanButtonStyle"
                        >
                          <span>已贴签</span>
                        </van-button>
                      </template>
                    </van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
            </van-cell-group>
          </div>
        </van-form>
      </queryPopup>
      <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="data.defaultData.dlDataList"
                        @select="onConfirm"/>
      <van-action-sheet v-model="smallPicker" cancel-text="取消" :actions="XLItem" @select="SubclassOnConfirm"/>
      <van-action-sheet v-model="showLyPicker" cancel-text="取消" :actions="data.defaultData.lyDataList"
                        @select="buildingOnConfirm"/>
    </basic-layout>
    <fullscreenModal :modal="fullscreenDetailModal" label="楼宇设备物"
                     defaultBgColor="#eee"
                     :isShowEdit="true" editType="detail"
                     @handleClose="fullscreenDetailModal = false"
                     @handleEdit="handleEdit(Xqid)"
                     @handleCancel="editType = 'detail'">
      <asssetHouseEquipmentDetail @goBack="fullscreenDetailModal = false" ref="detailFormRef1" @refresh="onRefresh"/>
    </fullscreenModal>
  </div>
</template>
<script>
import $ from 'jquery'
import {
  getLbByType,
  getLouyByUser,
  queryShebListByParams,
  quxtq,
  updateBarcodeByDeviceId,
} from '@/api/srvAssurance/assetLabel/assetLabel'
import SbPmDetail from '@/views/srvAssurance/convapp/repair/sbPmDetail'
import asssetHouseEquipmentDetail from './asssetHouseEquipmentDetail.vue'
import assetHouseEquipmentEdit from './assetHouseEquipmentEdit.vue'

export default {
  name: 'assetHouseEquipment',
  components: {
    SbPmDetail,
    asssetHouseEquipmentDetail,
    assetHouseEquipmentEdit
  },

  data () {
    return {
      data: {
        defaultData: {
          dlDataList: [], //大类数据
          xlDataList: [], //小类数据
          lyDataList: [], //楼宇数据
        },

        filterData: {
          dlDataList: [], //大类数据
          xlDataList: [], //小类数据
          lyDataList: [], //楼宇数据
        },
      },
      chooseDlData: '请选择',
      chooseXlData: '请选择',
      chooseLyData: '请选择',
      dialogDataBack: [],
      dataList: [],

      loading: false,
      finished: false,
      refreshing: false,
      smallPicker: false,
      showPicker: false,
      showLyPicker: false,
      showDialog: false,
      handlerModal: false,
      fullscreenDetailModal: false,
      dialogTitle: '',

      flag: null,
      searchVal: null,
      Xqid: '',
      queryParam: {
        dal: '',
        xiaol: '',
        louyid: '',
        isyswid: '',
        pageIndex: 1,
        pageSize: 10,
        type: '03',
      },
      status: ['1', '2'],
      canteenCode: '',
      canteenData: '',
      SubclassData: '',
      buildingData: '',
      XLItem: [],
    }
  },

  created () {
    this.initLbType()
    this.initLyData()
    this.searchHandle()
  },

  methods: {
    searchHandle () {
      this.initData()
      this.show = false
    },
    defineSearch () {
      this.$refs.queryPopupRef.show = false
      this.onRefresh()
    },
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (
        this.dataList.length <
        this.queryParam.pageIndex * this.queryParam.pageSize
      ) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      if (this.status.length == 2) {
        this.queryParam.isyswid = ''
      } else {
        this.queryParam.isyswid = this.status[0]
      }
      console.log(this.queryParam)
      let res = await queryShebListByParams(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    // 重置查询条件
    handleReset () {
      this.queryParam = {
        dal: '',
        xiaol: '',
        louyid: '',
        isyswid: '',
        pageIndex: 1,
        pageSize: 10,
        type: '03',
      }
      this.canteenData = '请选择'//大类
      this.SubclassData = '请选择'//类别
      this.buildingData = '请选择'
      this.status = ['1', '2']
      this.getDataList()
    },

    async initLbType () {
      let lbDatas = await getLbByType({ type: '0' })
      if (lbDatas.status == 0) {
        var dataList = lbDatas.data
        dataList.forEach((item) => {
          if (item.parentCode == '') {
            this.data.defaultData.dlDataList.push(item)
          } else {
            this.data.defaultData.xlDataList.push(item)
          }
        })
      }
    },
    handleEdit (pamae) {
      this.fullscreenDetailModal = true
      this.$router.push({
        path: '/asset/assetHouseEquipmentEdit?id=' + pamae,
        query: {
          id: pamae,
          fullscreenModal: false,
        },
      })
    },
    async initLyData () {
      let louYuDatas = await getLouyByUser({
        corpid: sessionStorage.getItem('corpId'),
      })
      if (louYuDatas.status == 0) {
        var dataList = louYuDatas.data
        dataList.forEach((item) => {
          item.name = item.fangcname
          this.data.defaultData.lyDataList.push(item)
        })
      }
    },

    onConfirm (val) {
      console.log(val.name)
      this.canteenData = val.name
      this.queryParam.dal = val.code
      this.canteenCode = val.code
      this.showPicker = false
    },
    SubclassOnConfirm (val) {
      this.SubclassData = val.name
      this.queryParam.xiaol = val.code
      this.smallPicker = false
      this.XLItem = []
    },

    buildingOnConfirm (val) {
      this.buildingData = val.name
      this.queryParam.louyid = val.code
      this.showLyPicker = false
    },

    showDialogHandle (val) {
      this.dialogDataBack = []
      if (val === 1) {
        this.showPicker = true
      } else if (val === 2) {
        if (this.queryParam.dal == '') {
          this.$toast('请先选择大类')
          return
        }
        this.XLItem = []
        // // 处理小类数据
        let code = this.canteenCode
        console.log(code)
        this.data.defaultData.xlDataList.forEach((item) => {
          if (item.parentCode == code) {

            this.XLItem.push(item)
          }
        })

        this.smallPicker = true
      } else if (val === 3) {
        this.showLyPicker = true
      }
      this.showDialog = true
      this.flag = val
    },

    chooseHandle (item) {
      this.showDialog = false
      if (this.flag === 1) {
        this.chooseDlData = item.name
        this.queryParam.dal = item.code
      } else if (this.flag === 2) {
        this.chooseXlData = item.name
        this.queryParam.xiaol = item.code
      } else if (this.flag === 3) {
        this.chooseLyData = item.name
        this.queryParam.louyid = item.fangcid
      }
    },

    onUpdate (value) {
      value = value.trim()
      this.dialogDataBack = []
      let dialogData = []
      if (this.flag === 1) {
        dialogData = this.data.defaultData.dlDataList

      } else if (this.flag === 2) {
        dialogData = this.data.defaultData.xlDataList
      } else if (this.flag === 3) {
        dialogData = this.data.defaultData.lyDataList
      }
      if (value == null || value.trim() == '') {
        this.dialogDataBack = [...dialogData]
        return
      }
      if (value) {
        dialogData.forEach((i) => {
          let val = { ...i }
          //判断遍历是否包含输入字符
          if (val.name.indexOf(value) != -1) {
            var newHtml = `<span style="color: red">${value}</span>`
            //实现高亮效果
            this.dialogDataBack.push(val)
            //替换高亮字段
            this.dialogDataBack.forEach((item) => {
              item.value = item.name
              item.value = item.value.replace(value, newHtml)
            })
          }
        })
      }
    },

    async delHandle (item) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定需要清除[' + item.fangcname + ']的实物ID吗？',
        })
        .then(async () => {
          let queryParam = {}
          queryParam.swid = item.swid
          queryParam.shebid = item.id
          let res = await quxtq(queryParam)
          if (res.status === 0) {
            this.$toast(res.message)
            this.initData()
          }
        })
        .catch(() => {
        })
    },

    editHandle (param) {
      this.Xqid = param
      this.fullscreenDetailModal = true
      this.editType = 'detail'
      this.isAdd = false
      this.$refs.detailFormRef1.getSearch(param)
    },
    tieqHandle (item, i) {
      let div = document.getElementsByClassName('dataStyle')[i]
      $('.dataStyle').removeClass('moth')
      $(div).addClass('moth')
      let _this = this
      wx.scanQRCode({
        desc: 'scanQRCode desc',
        needResult: 1, // 默认为0，扫描结果由i国网处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success: async function (res) {
          if (res.resultStr) {
            let queryParam = {}
            queryParam.shebid = item.id
            queryParam.swid = res.resultStr
            queryParam.type = '03'
            let resData = await updateBarcodeByDeviceId(queryParam)
            if (resData.status == 0) {
              _this.initData()
            }
            $(div).removeClass('moth')
          }
        },
        error: function (res) {
          $(div).removeClass('moth')
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        },
      })
    },
  },
}
</script>
<style scoped lang="less">
.main {
  height: 100%;
  background-color: #8080803b;

  .filterBox {
    .checkstyle {
      width: 100%;

      .vanCheckboxGroupStyle {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .buttonStyle {
          .vanButtonStyle {
            background-color: #0ca8ad4f;
            border-radius: 5px;
            height: 35px;

            span {
              color: gray;
            }
          }

          .vanButtonStyleA {
            border-radius: 5px;
            border: 1px solid gray !important;
            height: 35px;

            span {
              color: gray;
            }
          }
        }
      }

      /deep/ .van-checkbox__icon {
        height: 100%;
      }

      /deep/ .van-cell__value {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .van-field__body {
          width: 100%;
        }
      }
    }
  }

  .listCard {


    .cardVanPullRefresh1 {
      min-height: 100%;

      .dataStyle {
        height: 144px;
        margin: 10px;
        background-color: #ffffff;
        width: 95%;
        border-radius: 3px;

        .dataStyleMing {
          position: relative;

          .bImgStyle {
            position: absolute;
            right: 15px;
            top: 39px;
            .btn {
              right: 10px;
              bottom: 25px;

              .van-button {
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border-radius: 17px;
                font-size: 13px;
              }
            }

            .btn1 {
              right: 10px;
              bottom: 25px;

              .van-button {
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                border-radius: 17px;
                font-size: 13px;
              }
            }
          }

          .dataB1Style {
            margin-top: 7px;
            margin-bottom: 7px;
          }
        }

        .hengXian {
          box-sizing: border-box;
          height: 1.46667rem;
          border-bottom: 1px solid #eee;
        }

        .mainStyle {
          display: flex;
          flex-direction: column;

          .dataAStyle {
            width: 97%;
            height: 1rem;
            display: -webkit-inline-box;
            vertical-align: middle;
            font-size: 0.3rem;

            .dataAAStyle {
              .label {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 20px;
                height: 0.4667rem;
                margin-top: 1px;
                position: absolute;
                z-index: 9999;
                color: rgb(51, 51, 51);
              }

              .label1 {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                width: 20px;
                height: 0.4667rem;
                margin-top: 1px;
                position: absolute;
                z-index: 9999;
                color: rgb(51, 51, 51);
              }

              color: #aaaaaa;
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
              height: 28px;
              line-height: 40px;
              margin: auto;
              width: 98%;

              span {
                margin-left: 15px;
              }
            }
          }
        }

        .dataBStyle {
          height: 20px;
          position: relative;

          .dataBBStyle {
            .aImgStyle1 {
              position: absolute;
              top: 13px;
              right: 33px;
              margin-left: 78%;
            }

            .dataBBTextStyle {
              font-size: 15px;
              position: relative;
              height: 30px;
              top: 10px;
              font-weight: bold;
              width: 60%;

              b span {
                font-size: 14px;
              }

            }

            .aImgStyle {
              background: #f2a84e;
              font-size: 9px;
              color: #fff;
              margin-left: 8px;
              padding: 2px 3px;
              border-radius: 3px;
            }
          }
        }

        .dataTopStyle {
          margin-top: 7px;
        }

        .aTextStyle {
          float: right;
          width: 50%;
          height: 100%;
          border-radius: 2px;
          padding: 3px 6px;
          color: green;
          background: #dbf7db;
        }
      }

      .custom-image {
        height: 100%;
      }
    }


    .dataStyle {
      height: 148px;
      margin: 15px 10px;
      background-color: #ffffff;
      border-radius: 10px;
    }

    .custom-image {
      height: 100%;
    }
  }

  //右侧栏
  .rightBar {
    .mainPopupStyle {
      padding: 10px;
      margin-top: 30px;

      .typeStyle {
        font-size: 19px;
        font-weight: bold;
      }

      .typeStyleA {
        width: 5px;
        height: 27px;
        float: left;
        background-color: #0ca8add4;
      }

      .typeStyleB {
        margin-left: 10px;
        margin-top: 20px;
      }

      .checkstyle {
        width: 100%;

        .vanCheckboxGroupStyle {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .buttonStyle {
            .vanButtonStyle {
              background-color: #0ca8ad4f;
              border-radius: 5px;
              height: 35px;

              span {
                color: gray;
              }
            }

            .vanButtonStyleA {
              border-radius: 5px;
              border: 1px solid gray !important;
              height: 35px;

              span {
                color: gray;
              }
            }
          }
        }

        /deep/ .van-checkbox__icon {
          height: 100%;
        }

        /deep/ .van-cell__value {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .van-field__body {
            width: 100%;
          }
        }
      }
    }
  }

  .dialogMainStyle {
    .dialogSearchStyle {
      position: fixed;
      width: 100%;
    }

    .dialogDataStyle {
      text-align: center;
      margin-top: 50px;

      div {
        padding: 10px;
      }
    }
  }

  .bottom {
    position: absolute;
    bottom: 0px;
    width: 100%;
    display: flex;

    button {
      flex: 1;
      border-radius: 0px;
    }

    .van-button--info {
      background-color: #0ca8add4;
      border: 0.02667rem solid #0ca8add4;
    }

    .van-button--default {
      color: #1989fa;
    }
  }

  .moth {
    border: 3px solid orange;
  }

  /deep/ .van-dialog {
    height: 70%;
  }

  /deep/ .van-dialog__content {
    overflow-y: scroll;
    height: 85%;
  }
}
</style>
